<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div class="col-md-12">
    <h2>{{'me.title'|translate}}</h2>
    <form #passwordForm="ngForm" (ngSubmit)="changePassword()" class="mt-4">
        <div class="form-group row" *ngFor="let att of ['user_id','full_name','email','language']">
            <label for="{{att}}" class="col-md-1 col-form-label">{{'users.attributes.' + att|translate}}</label>
            <div class="col-md-4">
                <input id="{{att}}" class="form-control" value="{{userService.userInfo[att]}}" readonly>
            </div>
        </div>
        <div class="form-group row"
             *ngFor="let dateAtt of ['timestamp_account_creation','timestamp_last_password_change']">
            <label for="{{dateAtt}}" class="col-md-1 col-form-label">{{'users.attributes.' + dateAtt|translate}}</label>
            <ng-container *ngIf="userService.userInfo[dateAtt]">
                <div class="col-md-4">
                    <input id="{{dateAtt}}" class="form-control"
                           value="{{userService.userInfo[dateAtt]|date:'YYYY-MM-dd HH:mm:ss'}}" readonly>
                </div>
            </ng-container>
        </div>
        <div class="form-group row">
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-4">
                <div class="form-check" *ngFor="let checkAtt of ['password_change_required','validated','locked']">
                    <input id="{{checkAtt}}" type="checkbox" class="form-check-input disabled"
                           [checked]="userService.userInfo[checkAtt]?'true':null" disabled="disabled">
                    <label for="{{checkAtt}}"
                           class="form-check-label">{{'users.attributes.' + checkAtt|translate}}</label>
                </div>
            </div>
        </div>
        <hr class="mt-3" />
        <h2>{{'users.edit.changePasswordTitle'|translate}}</h2>
        <div class="form-group row mt-4" >
            <label for="current_password" class="col-md-1 col-form-label">{{'users.attributes.current_password'|translate}}</label>
            <div class="col-md-4">
                <input id="current_password" name="current_password" type="password" class="form-control" required
                       [(ngModel)]="formData.current_password" #v_current_password="ngModel" [ngClass]="valid('current_password')">
                <small class="invalid-feedback" *ngIf="v_current_password.errors?.required">{{'form.error.required'|translate}}</small>
            </div>
        </div>
        <div class="form-group row" >
            <label for="password" class="col-md-1 col-form-label">{{'users.attributes.new_password'|translate}}</label>
            <div class="col-md-4">
                <input id="password" name="password" type="password" class="form-control" required
                       [ngClass]="valid('password')"
                       [(ngModel)]="formData.password"  #v_password="ngModel" >
                <small class="invalid-feedback" *ngIf="v_password.errors?.required">{{'form.error.required'|translate}}</small>
                <small class="invalid-feedback" *ngIf="v_password.errors?.invalidpassword">{{v_password.errors.invalidpassword}}</small>
            </div>
        </div>
        <div class="form-group row" >
            <label for="confirm_password" class="col-md-1 col-form-label">{{'users.attributes.confirm_password'|translate}}</label>
            <div class="col-md-4">
                <input id="confirm_password" name="confirm_password" type="password" class="form-control" required
                       [(ngModel)]="formData.confirm_password" [class.is-valid]="confirmIsValid()" [class.is-invalid]="confirmIsNotValid()">
            </div>
        </div>
        <div class="form-group row" >
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-4">
            <button class="btn btn-primary"
                    type="submit">{{'users.edit.submitPassword'|translate}}</button>
            </div>
        </div>

    </form>
</div>


